<template>
  <view class="love-container">
    <!-- 顶部日期 -->
    <view class="top-date-section">
      <text class="line"></text>
      <text class="today-text">Today：{{ today }}</text>
      <text class="line"></text>
    </view>

    <!-- 时间展示容器 -->
    <view class="time-box">
      <text class="time-title">我们已经在一起</text>

      <view class="time-display">
        <text class="unit">
          <text class="number">{{ days }}</text>天
        </text>
        <text class="unit">
          <text class="number">{{ hours }}</text>小时
        </text>
        <text class="unit">
          <text class="number">{{ minutes }}</text>分
        </text>
        <text class="unit">
          <text class="number">{{ seconds }}</text>秒
        </text>
        <text class="unit">
          <text class="number ms">{{ milliseconds }}</text>毫秒
        </text>
      </view>

      <!-- 开始日期 -->
      <text class="start-date">开始于：{{ startDateText }}</text>
    </view>

    <!-- 倒数日 -->
    <view class="countdown-box">
      <text class="countdown-icon">💖</text>
      <text class="countdown-text">倒数日：{{ countdownDays }} 天</text>
    </view>

    <!-- 新增：下个纪念日具体日期 -->
    <view class="anniversary-date">
      下个纪念日：{{ nextAnniversaryDate }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startDate: new Date('2025-01-17T00:00:00'), // 设置你们开始在一起的具体时间
      anniversaryMonth: 0,   // JS 中月份从 0 开始，所以 0 表示 1月
      anniversaryDay: 17,    // 纪念日是 17 号
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
      milliseconds: 0,
      intervalId: null,
      today: '',
      countdownDays: 0,
      nextAnniversaryDate: '', // 新增字段：下一个纪念日的显示文本
      startDateText: ''
    };
  },
  methods: {
    updateTime() {
      const now = new Date();

      // 格式化今天日期
      this.today = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;

      // 计算在一起时间
      let diff = now - this.startDate;
      if (diff < 0) diff = 0;

      const ms = diff % 1000;
      const totalSeconds = Math.floor(diff / 1000);
      const totalMinutes = Math.floor(totalSeconds / 60);
      const totalHours = Math.floor(totalMinutes / 60);
      const totalDays = Math.floor(totalHours / 24);

      this.days = totalDays;
      this.hours = totalHours % 24;
      this.minutes = totalMinutes % 60;
      this.seconds = totalSeconds % 60;
      this.milliseconds = ms;

      // 更新倒计时和纪念日
      this.updateCountdown();
    },
    updateCountdown() {
      const now = new Date();
      let year = now.getFullYear();
      let anniversary = new Date(year, this.anniversaryMonth, this.anniversaryDay);

      if (anniversary < now) {
        year += 1;
        anniversary = new Date(year, this.anniversaryMonth, this.anniversaryDay);
      }

      const diff = anniversary - now;
      this.countdownDays = Math.ceil(diff / (1000 * 60 * 60 * 24));
      this.nextAnniversaryDate = this.formatDateForDisplay(anniversary); // 格式如：2026年1月17日
    },
    formatDate(date) {
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
    },
    formatDateForDisplay(date) {
      return this.formatDate(date);
    }
  },
  mounted() {
    this.startDateText = this.formatDate(this.startDate);
    this.updateTime();
    this.intervalId = setInterval(this.updateTime, 10); // 每10毫秒更新一次
  },
  beforeDestroy() {
    if (this.intervalId) clearInterval(this.intervalId);
  }
};
</script>

<style scoped lang="scss">
$primary-color: #e91e63;
$secondary-color: #f06292;

.love-container {
  padding: 40rpx;
  background-color: #fff5f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: "PingFang SC", sans-serif;
}

/* ===== 顶部日期栏 ===== */
.top-date-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 700rpx;
  margin-bottom: 40rpx;
  padding: 0 20rpx;
}

.line {
  flex: 1;
  height: 2rpx;
  background-color: $secondary-color;
  margin: 0 10rpx;
}

.today-text {
  font-size: 28rpx;
  color: #d81b60;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 10rpx;
}

/* ===== 时间展示容器 ===== */
.time-box {
  width: 100%;
  max-width: 700rpx;
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #ffe0f0, #f8bbd0);
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-bottom: 30rpx;
}

.time-title {
  font-size: 32rpx;
  color: $primary-color;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.time-display {
  display: flex;
  justify-content: center;
  gap: 10rpx;
  white-space: nowrap;
  font-family: monospace; // 等宽字体，防止跳动
}

.unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #d84315;
  font-weight: bold;
  min-width: auto;
  flex-shrink: 0;
  text-align: center;
  gap: 0;
}

.number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  text-align: center;
  margin: 0 4rpx;
  font-family: 'Din Pro', monospace;
  font-size: 32rpx;
  font-weight: bold;
  color: #ad1457;
}

.number.ms {
  width: 100rpx;
  margin: 0 4rpx;
}

.start-date {
  display: block;
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #888;
}

/* ===== 倒数日区域 ===== */
.countdown-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 30rpx;
  background-color: #fce4ec;
  border-radius: 16rpx;
  border: 1rpx solid #f8bbd0;
  font-size: 28rpx;
  color: #c2185b;
  font-weight: bold;
}

.countdown-icon {
  margin-right: 10rpx;
}

/* ===== 新增：下个纪念日日期样式 ===== */
.anniversary-date {
  display: block;
  margin-top: 10rpx;
  padding: 0 30rpx;
  font-size: 24rpx;
  color: #888;
  text-align: center;
}
</style>